<template>
	<div class="order">
		<custom-header-bar title="订单详情" backStatus="1" bg="1"></custom-header-bar>
		<div class="content">
			<div class="address" v-if="detailInfo.jzAddress">
				<image src="/static/point.png" class="point"></image>
				<div>
					<div class="concat-info">
						<div class="name">{{ detailInfo.jzAddress&&detailInfo.jzAddress.name }}</div>
						<div class="phone">{{ detailInfo.jzAddress&&detailInfo.jzAddress.mobile }}</div>
					</div>
					<div class="address-info">
						{{ detailInfo.jzAddress.addressOneStr||'' }}
						{{ detailInfo.jzAddress.addressTwoStr||'' }}
						{{ detailInfo.jzAddress.addressThreeStr||'' }}
						{{ detailInfo.jzAddress.addressFourStr||'' }}
						{{ detailInfo.jzAddress.addressDetail||'' }}
					</div>
				</div>
			</div>
			<div class="info" v-if="detailInfo.jzLaborer">
				<div class="flex">
					<div class="avatar">
						<img :src="detailInfo.jzLaborer && detailInfo.jzLaborer.iconUrl" alt="" />
					</div>
					<div class="user-info">
						<div class="name">
							<span>{{ detailInfo.jzLaborer && detailInfo.jzLaborer.name }}</span>
							<span>
								{{ detailInfo.jzLaborer && detailInfo.jzLaborer.addressOneStr }}
								{{ detailInfo.jzLaborer && detailInfo.jzLaborer.addressTwoStr }}
								人
							</span>
						</div>
						<div class="skill">
							<span>{{
                  detailInfo.jzLaborer && detailInfo.jzLaborer.yearNum
                }}年工作经验</span>
							<span>{{ detailInfo.contentTypeName }}</span>
							<span>{{ detailInfo.jzLaborer && detailInfo.jzLaborer.age }}岁</span>
						</div>
						<div class="price">
							<span>￥</span>{{ detailInfo.jzLaborer && detailInfo.jzLaborer.serveMoney }}
						</div>
					</div>
				</div>
			</div>
			<div class="info">
				<div class="time flex align-center justify-between">
					<div class="name" style="color: #484848; font-size: 32upx">预约时间</div>
					<div class="text" style="color: #dc3338; font-size: 30upx">
						<div>{{detailInfo.subDate}}</div>
						<div>{{detailInfo.subTime}}</div>
					</div>
				</div>
			</div>
			<div class="detail">
				<div class="detail-item">
					<span class="label">订 单 号：</span>
					<span class="detail-text">{{ detailInfo.id }}</span>
				</div>
				<div class="detail-item">
					<span class="label">订单时间：</span>
					<span class="detail-text">{{ detailInfo.createTime }}</span>
				</div>
				<div class="detail-item">
					<span class="label">预约方式：</span>
					<span class="detail-text">{{ detailInfo.orderSource | sourceType}}</span>
				</div>
				<div class="detail-item" v-if="detailInfo.orderSuccessType===2">
					<span class="label">撤销方式：</span>
					<span class="detail-text">{{ detailInfo.orderRepealType | sourceType}}</span>
				</div>
				<div class="detail-item" v-if="detailInfo.orderSuccessType===2">
					<span class="label">撤销时间：</span>
					<span class="detail-text">{{ detailInfo.orderSuccessTime}}</span>
				</div>
				<div class="detail-item" v-if="detailInfo.orderSuccessType===1">
					<span class="label">完成时间：</span>
					<span class="detail-text">{{ detailInfo.orderSuccessTime}}</span>
				</div>
			</div>
		</div>
		<div class="bottom" v-if="detailInfo.orderSuccessType === 3">
			<button class="revoke-btn" @click="handleClickRevoke">撤销</button>
		</div>
		<u-popup :overlayOpacity="0.6" :round="10" mode="center" :show="showTip">
			<div class="tips">
				<div class="tips-title flex align-center">
					<image src="/static/icon-warning.png" class="warning-icon"></image>
					<!-- <img src="/static/icon-warning.png" class="warning-icon" alt="" /> -->
					<span>撤销提示</span>
				</div>
				<div class="tips-text">确认取消当前预约服务吗？</div>
				<div class="tips-bototm flex align-center justify">
					<button class="tips-cancle" @click="showTip = false">取消</button>
					<button class="tips-confirm" @click="handleClickCancle">确定</button>
				</div>
			</div>
		</u-popup>
		<popup-tip image="warn" ref="popuptip" title="超时撤销提示" subTitle="尊敬的用户由于服务人员即将到岗，当前不能取消订单，请谅解！祝您生活愉快!"
			confirmText="知道了">
		</popup-tip>
	</div>
</template>
<script>
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import {
		myOrderDetail,
		orderUpdate
	} from "@/api/my.js";
	import PopupTip from "@/components/popup-tip.vue"
	import dayjs from "dayjs"
	export default {
		data() {
			return {
				showTip: false,
				detailInfo: {},
				id: ''
			};
		},
		filters: {
			sourceType(type) {
				const data = {
					1: "在线",
					2: "客服",
				};
				return data[type];
			},
		},
		created() {
			// if (this.$route.query.id) {
			//   this.getDetail(this.$route.query.id);
			// }
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getDetail(options.id);
			}
		},
		methods: {
			// 撤销
			handleClickRevoke() {
				this.showTip = true;
			},
			// 确定撤销
			handleClickCancle() {
				if (new dayjs(this.detailInfo.subDateTime).unix() - new dayjs().unix() > 2 * 60 * 60) {
					orderUpdate({
						orderStatus: 2,
						orderSuccessType: 2,
						id: this.id,
					}).then((res) => {
						if (res.data.code === 200) {
							this.showTip = false;
							uni.$u.toast("撤销成功");
							this.getDetail(this.id)
						}
					});
				} else {
					this.showTip = false;
					this.$refs.popuptip.tipshow = true
				}

			},
			getDetail(id) {
				myOrderDetail({
					id,
				}).then((res) => {
					if (res.data.code === 200) {
						this.detailInfo = res.data.data;
					}
				});
			},
		},
		components: {
			CustomHeaderBar,
			PopupTip
		},
	};
</script>
<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.order {
		height: 100vh;
		padding-top: 160upx;
		background-color: #f4f4f4;
		box-sizing: border-box;
		position: relative;

		.content {
			padding: 24upx;

			.address {
				background: #ffffff;
				border-radius: 30upx;
				padding: 50upx 40upx;
				display: flex;

				.concat-info {
					display: flex;
					align-items: center;
				}

				.point {
					flex: 0 0 46upx;
					width: 46upx;
					height: 46upx;
					margin-right: 20upx;
				}

				.name {
					font-size: 32upx;
					color: #000;
				}

				.phone {
					font-size: 28upx;
					color: rgba(0, 0, 0, 0.45);
					margin-left: 20upx;
				}

				.address-info {
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					display: -webkit-box;
					-webkit-line-clamp: 2; // 超出多少行
					-webkit-box-orient: vertical;
					color: #484848;
					margin-top: 18upx;
				}
			}

			.info {
				padding: 32upx;
				border-radius: 30upx;
				background-color: #fff;
				margin-top: 24upx;

				.flex {
					display: flex;
				}

				.avatar {
					width: 140upx;
					height: 180upx;
					flex-shrink: 0;
					border-radius: 10upx;
					overflow: hidden;
					margin-right: 28upx;
					border-radius: 10upx;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.user-info {
					position: relative;
					width: 0;
					flex: 1;
				}

				.name {
					font-size: 32upx;
					color: #484848;
					word-break: break-all;

					:first-child {
						margin-right: 15upx;
					}
				}

				.skill {
					color: rgba(0, 0, 0, 0.65);
					margin-top: 15upx;
					font-size: 28upx;
					display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
					-webkit-line-clamp: 2; //限制行数
					overflow: hidden; //超出部分隐藏
					text-overflow: ellipsis; //用一个省略号代替超出的内容

					span {
						padding-right: 20upx;
						border-right: 2upx solid #d1d1d6;
						margin-right: 20upx;
					}

					:last-child {
						border: none;
						margin: 0;
					}
				}

				.price {
					color: #dc3338;
					font-size: 36upx;

					span {
						font-size: 28upx;
					}
				}

				.time {
					word-wrap: break-word;

					.name {
						word-break: keep-all;
						margin-right: 24upx;
					}

					.text {
						text-align: right;
						word-wrap: break-word;
						word-break: break-all;
					}
				}
			}

			.detail {
				padding: 30upx 14upx;
				background-color: #fff;
				border-radius: 30upx;
				margin-top: 32upx;
				padding-bottom: 15upx;
				font-size: 28upx;

				.detail-item {
					margin-bottom: 15upx;

					.label {
						display: inline-block;
						width: 140upx;
						text-align: right;
						color: #484848;
					}

					.detail-text {
						color: rgba(0, 0, 0, 0.45);
					}
				}
			}
		}

		.bottom {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			padding-right: 24upx;
			height: 130upx;
			background-color: #f8f8f8;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			border-top: 1px solid #e7e7e7;

			.revoke-btn {
				width: 337upx;
				height: 80upx;
				background: #f2f2f2;
				color: #666666;
				font-size: 34upx;
				text-align: center;
				margin-left: 75upx;
				margin: 0;
			}
		}

		.tips {
			width: 416upx;
			padding: 0 40upx;
			padding-top: 65upx;
			padding-bottom: 50upx;
			box-sizing: border-box;
		}

		.tips-title {
			justify-content: center;

			span {
				font-size: 34upx;
				color: rgba(0, 0, 0, 0.8);
				margin-left: 20upx;
			}

			.warning-icon {
				width: 52upx;
				height: 52upx;
			}
		}

		.tips-text {
			font-size: 26upx;
			color: #666;
			margin-top: 55upx;
		}

		.tips-bototm {
			margin-top: 60upx;

			.tips-cancle,
			.tips-confirm {
				flex: 1;
				height: 60upx;
				font-size: 26upx;
			}

			.tips-cancle {
				background-color: #ebedf0;
				color: #bfbebe;
			}

			.tips-confirm {
				background-color: #61d7ca;
				color: #fff;
				margin-left: 16upx;
			}
		}
	}
</style>
